<template>
	<div>
		<!-- 头部 -->
		<div class="m-b-20 ovf-hd">
			<div class="">
				<el-button type="primary" icon="document" @click="Add.dialogFormVisible = true" v-if="!Add.disabled">新增</el-button>
			</div>
			<div>
				<!-- 搜索 -->
				<search-model :config="config.search" :data="data"></search-model>
			</div>
		</div>

		<!-- 内容 -->
		<transition name="fade" mode="out-in" appear>
			<table-model v-loading="showLoading" :Edit="Edit" :tableData="data.received.table" :config="config.table" :exchanged="data.exchanged" :baseApi="config.baseApi"></table-model>
		</transition>

		<!-- 底部 -->
		<div class="pos-rel p-t-20">
			
			<!-- 翻页操作 -->
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
			<div class="m-b-20 ovf-hd">
				<!-- 导出Excel表格 -->
				<downExcel :baseApi="config.baseApi" :config="config.excel" :tableData="data.received.table" :conditions="data.exchanged.search"></downExcel>
			</div>
		</div>
		<!-- 新增 -->
		<el-dialog :title="Add.config.title" :visible.sync="Add.dialogFormVisible">
			<el-form ref="form" :model="Add.data.form" :rules="Add.config.rules" label-width="130px">

				<!-- 普通输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.input">
					<el-input v-model.trim="Add.data.form[item.prop]" class="h-40 w-200" :maxlength="255" :placeholder="item.placeholder"></el-input>
				</el-form-item>

				<!--<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.select">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>-->

				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.multipleSelect">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>

				<!-- 图片上传 -->
				<el-form-item :label="this.Add.config.form.uploadImg.label" v-if="this.Add.config.form.uploadImg.label">
					<el-upload name='files[0]' class="avatar-uploader" :action="Add.config.uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="Add.data.form[this.Add.config.form.uploadImg.prop]" :src="Add.data.form[this.Add.config.form.uploadImg.prop]" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Add.dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="commitAdd">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import http from 'assets/js/http.js'
	import downExcel from 'components/Common/down-excel.vue'
	import tableModel from 'components/Common/table-modelUpId.vue'
	import searchModel from 'components/Common/search-model.vue'
	import pageModel from 'components/Common/page-model.vue'

	export default {
		components: {
			downExcel,
			tableModel,
			searchModel,
			pageModel
		},
		data() {
			return {
				Add: {
					baseApi: '/AdminApi/Models/banner_edit',
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							index: 1,
							type: 2,
							title: '',
							img: '',
							content_link: ''
						},
						selectData: {
							index: [{
								label: '1',
								value: 1
							}, {
								label: '2',
								value: 2
							}],
						}
					},
					config: {
						uploadUrl: 'http://www.tp51.com/index/index/uploads',
						domain: 'http://www.tp51.com/',
						title: '新增',
						form: {
							input: [{
									prop: 'title',
									label: '标题',
									placeholder: '标题',
								},
								{
									prop: 'content_link',
									label: '链接地址',
									placeholder: '链接地址',
								},
							],
							select: [{
								prop: 'index',
								label: '显示顺序',
								placeholder: '请选择顺序'
							}],
							uploadImg: {
								prop: 'img',
								label: 'banner图片'
							}
						},
						rules: {
							Remark: [{
								required: true,
								message: '请输入账户变动详情 备注'
							}]
						}
					}
				},
				Edit: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							CellPhone: null,
						},
						selectData: []
					},
					config: {
						uploadUrl: axios.defaults.baseUR + 'admin/upload',
						domain: axios.defaults.baseUR,
						title: '编辑用户信息',
						form: {
							input: [{
								prop: 'CellPhone',
								label: '手机号'
							}],
							select: [],
							uploadImg: []
						},
						rules: {

						}
					}
				},
				config: {
					baseApi: '/AdminApi/Models/banner_list',
					excel: {
						fileName: '用户列表',
						tHeader: [
							'用户ID',

						],
						filterVal: [
							'id',

						],
					},

					table: {
						noGroup: false,
						checkbox: false,
						status: false,
						xiangqing: false,
						img: true,
						sort: {
							CreateDate: 'custom'
						},
						show: {
							prop: [
								'title',
								'content_link',
								'index',
								'addtime',
							],
							items: [
								'标题',
								'链接',
								'显示顺序',
								'上传时间',
							],
							width: []
						},
						operate: {
							del: {
								baseApi: '/AdminApi/Models/banner_edit'
							},
						}

					},
					search: {
						
					},
					page: {
						limits: [5, 10, 20, 50, 100],
						layout: 'total, sizes, prev, pager, next, jumper'
					}
				},
				data: {
					received: {
						table: [],
						count: null,
						search: {
							Enabled: [{
									label: '可用',
									value: '1'
								},
								{
									label: '冻结',
									value: '0'
								}
							]
						}
					},
					exchanged: {
						search: {
							limit: 10,
							page: 1,
							orderByString: ''
						},
						multipleSelection: [],
						isDelete: 0
					}
				}
			}
		},
		created() {
			this.init()
			// 延迟绑定监听
			this.$watch('data.exchanged.search', {
				deep: true,
				handler: function() {
					router.push({
						path: this.$route.path,
						query: this.getCondition()
					})
					_g.openGlobalLoading()
					this.tableData()
				}
			})
			this.$watch('data.exchanged.isDelete', {
				deep: true,
				handler: function() {
					_g.openGlobalLoading()
					this.tableData()
				}
			})
		},
		methods: {
			init() {
				// 基本数据获取
				this.tableData()
			},
			tableData() {
				// 表格数据
				const data = {
					params: this.getCondition()
				}
				// 请求地址
				let url = this.config.baseApi
				this.apiPost(url, data).then(res => {
					console.log('列表res', res)
					this.handelResponse(res, data => {

						this.data.received.table = data
						this.data.received.count = data.length
						_g.closeGlobalLoading()
					})
				})
			},
			getCondition() {
				// 搜索优化配置
				let temp = this.data.exchanged.search
				let params = {}
				for(let key in temp) {
					if(temp[key]) {
						params[key] = temp[key]
					}
				}
				return params
			},

			handleAvatarSuccess(res, file) {
				console.log('上传图片res', res)
				this.Add.data.form[this.Add.config.form.uploadImg.prop] = res.data[0]
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!')
				}
				return isLt2M
			},
			commitAdd() {
				console.log(this.Add.data.form)
				this.$refs.form.validate(pass => {
					if(pass) {
						// 提交数据
						this.apiPost(this.Add.baseApi, this.Add.data.form).then(res => {
							this.handelResponse(
								res,
								data => {
									console.log('添加后返回res', res)
									_g.toastMsg('success', res.data)
									this.data.exchanged.isDelete++
										this.Add.dialogFormVisible = false 
								},
								() => {
									this.isLoading = !this.isLoading
								}
							)
						})
					}
				})
			},
		},
		mixins: [http]
	}
</script>

<style scoped>
	.el-input,
	.el-input__inner {
		width: auto;
	}
</style>